<!-- 新增送修-厂家 -->
<template>
	<Card>
		<template #head>
			<view class="head">
				<view class="left">
					{{title}}{{index+1}}
				</view>
				<view class="right">
					<template v-if="index > 1">
						<u-icon name="trash" color="#98A5B3" size="28"></u-icon>
						<text class="text" @click="onDelete">删除</text>
					</template>
				</view>
			</view>
		</template>
		<template #body>
			<CellItem v-model="formData.factory" label="厂家" itemClickType="select-factory"> </CellItem>
			<CellItem v-model="formData.user" label="厂家代表" ref="User" :customActionSheetList="CustomActionSheetList"></CellItem>
			<CellField v-model="formData.phone" label="联系电话"></CellField>

		</template>
	</Card>
</template>

<script>
	import Card from '@/components/card/components/cardBaseWrapper.vue'
	import HButton from '@/components/button/index.vue'
	import { searchFactoryPerson } from '@/apis/common.js'
	export default {

		components: {
			Card,
			HButton
		},
		props: {
			data: {
				type: Object,
				default: () => {
					return {
						factory: '',
						user: '',
						phone: ''
					}
				}
			},
			title: {
				type: String,
				default: '厂家'
			},
			index: {
				type: Number,
				default: 0
			}

		},
		computed: {
			CustomActionSheetList() {
				this.$nextTick(() => {
					console.log(this.$refs, 'this.$refs');
					this.$refs.User.resetInit()
				})
				return this.factoryPersonList.map((item) => {
					return {
						name: item.name,
						value: item.id,
						other: item.mblNo
					}
				})
			}
		},
		watch: {
			'formData.user'(val) {
				let res = this.CustomActionSheetList.find((item) => item.value == val)
				this.$set(this.formData, 'phone', res.other)
			},
			'formData.factory'(val) {
				searchFactoryPerson(val).then((res) => {
					if (res.code === 0) {
						this.factoryPersonList = res.body.list
						if (this.factoryPersonList.length) {
							let {
								id,
								name,
								mblNo
							} = this.factoryPersonList[0]
							this.$set(this.formData, 'user', id)
							this.$set(this.formData, 'phone', mblNo)
						}
					}
				})
			}
		},
		data() {

			return {
				factoryPersonList: [],
				formData: {
					factory: '',
					user: '',
					phone: ''
				}
			}
		},


		methods: {
			validate() {
				let msg = ''
				if (this.formData.factory == '') {
					msg = '请选择维修厂家'
				} else {
					msg = ''
				}
				if (!msg) {
					return true
				}
				this.$msg(msg)
				return false
			},
			onDelete() {
				this.$emit('onDelete', this.index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		display: flex;

		>.left,
		.right {
			flex: 1;
		}

		>.left {
			font-weight: 600;
			font-size: 32rpx;
			color: #0F2E4D;
		}

		>.right {
			text-align: right;

			>.text {
				margin-left: 14rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #98A5B3;
			}
		}
	}
</style>
